<template>
	<view class="my-coupon">
		 <navigator class="back-arrow" url="/pages/my/my">
		      <view class="arrow"></view>
		  </navigator> 
	    <text class="title">我的优惠券</text>
	</view>
	
	<!-- tab 切换 -->
	  <view class="tab-container">
	    <view 
	      class="tab-item" 
	      :class="{ active: activeTab === 0 }" 
	      @click="changeTab(0)">
	      未使用
	    </view>
	    <view 
	      class="tab-item" 
	      :class="{ active: activeTab === 1 }" 
	      @click="changeTab(1)">
	      已使用
	    </view>
	    <view 
	      class="tab-item" 
	      :class="{ active: activeTab === 2 }" 
	      @click="changeTab(2)">
	      已过期
	    </view>
	  </view>
	
	  <!-- 切换内容 -->
	  <view class="content">
		  <!-- 未使用的优惠券列表 -->
	    <view v-if="activeTab === 0" >
		
		<view class="coupon-container" v-for="(coupon, index) in coupons" :key="index">
		   <!-- 左侧部分：优惠券信息 -->
		   <view class="left-side">
		     <view class="amount">￥{{ coupon.amount }}</view>
		     <view class="condition">{{ coupon.condition }}</view>
		   </view>
			 
		   <!-- 中间竖杠 -->
		   <view class="view-divider"></view>
			 
		   <!-- 右侧部分：其他信息 -->
		   <view class="right-side">
		     <!-- 通用/加油站信息 -->
		     <view class="usage">{{ coupon.usage }}</view>
			 
		     <!-- 有效期信息和领取按钮 -->
		     <view class="bottom-row">
		       <view class="expiry-date">{{ coupon.expiry }}</view>
		       <view class="receive-btn" @click="receiveCoupon(index)">立即使用</view>
		     </view>
		   </view>
		 </view>
		 
		 
		 <!-- 折扣券 -->
		<!-- 折扣券列表 -->
		    <view class="coupon-container" v-for="(coupon, index) in discountCoupons" :key="'fullcut-' + index">
		      <view class="left-side">
		        <view class="discount">{{ coupon.discount }}</view>
		      </view>
		      <view class="view-divider"></view>
		      <view class="right-side">
		        <view class="usage">{{ coupon.usage }}</view>
		        <view class="bottom-row">
		          <view class="expiry-date">{{ coupon.expiry }}</view>
		          <view class="receive-btn" @click="receiveDiscountCoupon(index)">立即使用</view>
		        </view>
		      </view>
		    </view>
		
		</view>
		<!-- 已使用的优惠券列表 -->
	    <view v-if="activeTab === 1">
			
			<view class="coupon-container" v-for="(coupon, index) in coupons" :key="index">
			   <!-- 左侧部分：优惠券信息 -->
			   <view class="left-side-used">
			     <view class="amount-used">￥{{ coupon.amount }}</view>
			     <view class="condition-used">{{ coupon.condition }}</view>
			   </view>
				 
			   <!-- 中间竖杠 -->
			   <view class="view-divider-used"></view>
				 
			   <!-- 右侧部分：其他信息 -->
			   <view class="right-side">
			     <!-- 通用/加油站信息 -->
			     <view class="usage">{{ coupon.usage }}</view>
				 
			     <!-- 有效期信息和领取按钮 -->
			     <view class="bottom-row">
			       <view class="expiry-date-used">{{ coupon.expiry }}</view>
			       <view class="receive-btn-used">已使用</view>
			     </view>
			   </view>
			 </view>
			 
			 
			 <!-- 折扣券 -->
			<!-- 折扣券列表 -->
			    <view class="coupon-container" v-for="(coupon, index) in discountCoupons" :key="'fullcut-' + index">
			      <view class="left-side-used">
			        <view class="discount-used">{{ coupon.discount }}</view>
			      </view>
			      <view class="view-divider"></view>
			      <view class="right-side">
			        <view class="usage">{{ coupon.usage }}</view>
			        <view class="bottom-row">
			          <view class="expiry-date-used">{{ coupon.expiry }}</view>
			          <view class="receive-btn-used">已使用</view>
			        </view>
			      </view>
			    </view>
			
		</view>
		<!--已过期的优惠券列表  -->
	    <view v-if="activeTab === 2">
			
			<view class="coupon-container" v-for="(coupon, index) in coupons" :key="index">
			   <!-- 左侧部分：优惠券信息 -->
			   <view class="left-side-used">
			     <view class="amount-used">￥{{ coupon.amount }}</view>
			     <view class="condition-used">{{ coupon.condition }}</view>
			   </view>
				 
			   <!-- 中间竖杠 -->
			   <view class="view-divider-used"></view>
				 
			   <!-- 右侧部分：其他信息 -->
			   <view class="right-side">
			     <!-- 通用/加油站信息 -->
			     <view class="usage">{{ coupon.usage }}</view>
				 
			     <!-- 有效期信息和领取按钮 -->
			     <view class="bottom-row">
			       <view class="expiry-date-used">{{ coupon.expiry }}</view>
			       <view class="receive-btn-used">已过期</view>
			     </view>
			   </view>
			 </view>
			 
			 
			 <!-- 折扣券 -->
			<!-- 折扣券列表 -->
			    <view class="coupon-container" v-for="(coupon, index) in discountCoupons" :key="'fullcut-' + index">
			      <view class="left-side-used">
			        <view class="discount-used">{{ coupon.discount }}</view>
			      </view>
			      <view class="view-divider"></view>
			      <view class="right-side">
			        <view class="usage">{{ coupon.usage }}</view>
			        <view class="bottom-row">
			          <view class="expiry-date-used">{{ coupon.expiry }}</view>
			          <view class="receive-btn-used">已过期</view>
			        </view>
			      </view>
			    </view>
			
			
		</view>
	  </view>
</template>

<script setup>
	
	import { ref } from "vue";
	
	// 当前选中的 tab
	const activeTab = ref(0);
	
	// 切换 tab
	const changeTab = (index) => {
	  activeTab.value = index;
	};
	
	
	// 模拟优惠券数据
	const coupons = ref([
	  { amount: 10, condition: "满200元可用", usage: "通用/仅限XX加油站", expiry: "2024.04.11至2024.05.11" },
	  { amount: 20, condition: "满300元可用", usage: "通用/仅限XX加油站", expiry: "2024.03.01至2024.04.01" },
	  { amount: 20, condition: "满300元可用", usage: "通用/仅限XX加油站", expiry: "2024.03.01至2024.04.01" },
	  { amount: 20, condition: "满300元可用", usage: "通用/仅限XX加油站", expiry: "2024.03.01至2024.04.01" },
	  { amount: 20, condition: "满300元可用", usage: "通用/仅限XX加油站", expiry: "2024.03.01至2024.04.01" },
	  { amount: 20, condition: "满300元可用", usage: "通用/仅限XX加油站", expiry: "2024.03.01至2024.04.01" }
	]);
	
	// 模拟折扣券数据
	const discountCoupons = ref([
	  { discount: "9折", usage: "通用/仅限XX加油站", expiry: "2024.05.01至2024.06.01" },
	  { discount: "8.5折", usage: "通用/仅限XX加油站", expiry: "2024.03.15至2024.04.15" },
	
	  
	]);
	
	// 领取满减券
	const receiveCoupon = (index) => {
	  console.log(`使用满减券：`, coupons.value[index]);
	  uni.showToast({ title: "使用满减券成功！", icon: "success" });
	  // uni.navigateTo({
	  // 	url:"/packageIndex/car-service-coupon/car-service-coupon"
	  // })
	};
	
	// 领取折扣券
	const receiveDiscountCoupon = (index) => {
	  console.log(`使用折扣券：`, discountCoupons.value[index]);
	  uni.showToast({ title: "使用折扣券成功！", icon: "success" });
	};
	
	
</script>

<style>
	
	page {
	    background-color: white;
	}
	
	 .my-coupon {
	   display: flex;
	   justify-content: center;
	   align-items: center; /* 调整对齐方式，让内容靠近顶部 */
	   height: 10vh;
	   background-color: #F8F8F8;
	   position: fixed; /* 固定在顶部 */
	   top: 0;
	   left: 0;
	   width: 100%;
	 }
	 
	 .back-arrow {
	   position: relative;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   cursor: pointer;
	   left: -250rpx;
	 }
	 
	 .arrow {
	   width: 20rpx;
	   height: 20rpx;
	   border-top: 4rpx solid black;
	   border-right: 4rpx solid black;
	   transform: rotate(-135deg);
	   margin-top: 2vh;
	 }
	 
	 .title {
	   font-size: 40rpx;
	   font-weight: normal;
	   color: black;
	   margin-top: 2vh /* 向上移动标题，减少底部空间 */
	 }
	 
	 
	 
	 /* Tab 样式 */
	 .tab-container {
	   display: flex;
	   justify-content: space-around;
	   background: #ffffff;
	   padding: 20rpx 0;
	   margin-top: 10vh; /* 让内容从头部下方开始 */
	 }
	 
	 .tab-item {
	   flex: 1;
	   text-align: center;
	   font-size: 16px;
	   color: #333;
	   padding: 10rpx 0;
	   cursor: pointer;
	 }
	 
	 .active {
	   color: #007aff;
	   font-weight: bold;
	   
	 }
	 
	 /* 内容区 */
	/* .content {
	   padding: 20rpx;
	   font-size: 16px;
	 } */
	 
	 
	 
	 .coupon-container {
	 	width: 710rpx;
	 	height: 220rpx;
	 	margin-left: 24rpx;
	 	margin-bottom: 2rpx;
	    display: flex;
	    background-color: #EFEFEF;
	    padding-left: 4rpx;
	    border-radius: 12rpx;
	   }
	 
	  /* 左侧区域*/
	  .left-side {
	 	margin-top: 24rpx;
	 	margin-left: 4rpx;
	 	width: 99rpx;
	 	height: 120rpx;
	    background-color: #1D6FFF;
	    padding-top: 40rpx;
	 	padding-left: 46rpx;
	 	padding-bottom: 20rpx;
	    border-radius: 20rpx;
	    flex: 1;
	    margin-right: 10px;
	   }
	   
	   /* 已使用 */
	   .left-side-used {
	   	 	margin-top: 24rpx;
	   	 	margin-left: 4rpx;
	   	 	width: 99rpx;
	   	 	height: 120rpx;
	     background-color: #EFEFEF;
	     padding-top: 40rpx;
	   	 	padding-left: 46rpx;
	   	 	padding-bottom: 20rpx;
	     border-radius: 20rpx;
	     flex: 1;
	     margin-right: 10px;
		 border: 1.5px solid #BBBBBB;
	    }
	   
	 
	  .amount {
	 				
	     font-size: 44rpx;
	     color: white;
	     font-weight: normal;
	   }
	   
	   .amount-used{
		   font-size: 44rpx;
		   color: black;
		   font-weight: normal;
	   }
	 			 
	  .discount{
	 	font-size: 60rpx;
	 	color: white;
	 	font-weight: normal;
	 	}
		
		.discount-used{
			font-size: 60rpx;
			color: black;
			font-weight: normal;
		}
		
		
	 
	  .condition {
	     font-size: 14px;
	     color: white;
	     margin-top: 10px;
	   }
	   
	   .condition-used{
		   font-size: 14px;
		   color: black;
		   margin-top: 10px;
	   }
	 
	   /* 右侧区域 */
	  .right-side {
	     flex: 2;
	     padding: 15px 0px 15px 15px;
	   }
	 
	  .usage {
	 	 margin-top: 26rpx;		
	     font-size: 24rpx;
	     color: #333;
	     margin-bottom: 60rpx;
	   }
	 
	   .bottom-row {
	 	 margin-left: 24rpx;
	     display: flex;
	     justify-content: space-between;
	     align-items: center;
	   }
	 
	  .expiry-date {	
		 
	     font-size: 22rpx;
	     color: #EA1703;
	   }
	   
	   .expiry-date-used{
		   
		   font-size: 22rpx;
		   color: #a3a3a3;
	   }
	 
	   /* 领取按钮 */
	  .receive-btn {
	 	 width: 100rpx;
	 	 height: 36rpx;
	     background-color: #0084FF;
	     color: white;
	     padding: 8rpx 6rpx;
	     border-radius: 8rpx;
	     display: flex;
	     align-items: center;
	     justify-content: center;
	     cursor: pointer;
	     font-size: 25rpx;
	   }
	   
	   .receive-btn-used{
		   width: 100rpx;
		   height: 36rpx;
		   background-color: #bebebe;
		   color: white;
		   padding: 8rpx 6rpx;
		   border-radius: 8rpx;
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   cursor: pointer;
		   font-size: 25rpx;
	   }
	   
	   /* 中间的竖杠 */
	   .view-divider {
	     width: 2rpx;
	     height: 140rpx; /* 根据父容器的高度来设置竖杠的高度 */
	     background-color: #BBBBBB; /* 竖杠的颜色 */
	     margin-top: 46rpx ;  /* 给竖杠两边留一些间距 */
	   }
	   
	   .view-divider-used {
	     width: 2rpx;
	     height: 140rpx; /* 根据父容器的高度来设置竖杠的高度 */
	     background-color: #a3a3a3; /* 竖杠的颜色 */
	     margin-top: 46rpx ;  /* 给竖杠两边留一些间距 */
	   }
	   
	 
		   
		   
</style>
